<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    request.setAttribute("path", path);
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>我的购物车</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.0.js"></script>
<style type="text/css">

</style>
</head>
<body>
<div class="banner_x center">
    <a href="${pageContext.request.contextPath}/page/liebiao.jsp" target="_blank"><div class="logo fl"></div></a>

    <div class="wdgwc fl ml40">我的购物车</div>
    <div class="wxts fl ml20">温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</div>
    <div class="dlzc fr">
        <ul>
            <li><a href="${pageContext.request.contextPath}/page/zhuye.jsp" target="_blank">首页</a></li>
            <li>|</li>
            <li><a href="${pageContext.request.contextPath}/page/dingdanzhongxin.jsp" target="_blank">我的订单</a></li>
            <li>|</li>
            <li><a href="${pageContext.request.contextPath}/page/self_info.jsp" target="_blank">个人中心</a></li>
        </ul>

    </div>
    <div class="clear"></div>
</div>
<div class="xiantiao"></div>
<div class="gwcxqbj">
    <div class="gwcxd center">
        <div class="top2 center">
            <div class="sub_top fl">
                <input type="checkbox" value="quanxuan" class="quanxuan" />全选
            </div>
            <div class="sub_top fl">商品名称</div>
            <div class="sub_top fl">单价</div>
            <div class="sub_top fl">数量</div>
            <div class="sub_top fl">小计</div>
            <div class="sub_top fr">操作</div>
            <div class="clear"></div>
        </div>
        <div>

            <c:forEach var="obj" items="${shop}" varStatus="session">
                <div class="content2 center">
                    <div class="sub_content fl ">
                        <input type="checkbox" value="quanxuan" class="quanxuan" style="margin-top: 52px;">
                    </div>
<%--                    <div class="sub_content fl"><img style="width: 75px;height: 95px" src="/image/hlm.jpg" alt=""></div>--%>
                    <div class="sub_content fl ft20" style=" margin-top: -1px;margin-right: -3px;padding-right: 0px;margin-left: 105px;padding-bottom: 0px;align-content: center;font-size: 19px;width: 160px;padding-left: 0px;text-align: center">${obj.bookname}</div>
                    <div class="sub_content fl " style="margin-top: -1px;margin-left: 296px;margin-right: -245px;">${obj.price}元</div>
                    <div class="sub_content fl">
                        <input class="shuliang" type="number" value="${obj.bookcount}" step="1" min="1" onchange="zongjia(this)" style="margin-top: 41px;">
                    </div>
                <div class="sub_content fl sum" style="margin-top: -2px;margin-right: 8px;margin-left: 125px;">${obj.bookprice}</div>
                    <div class="sub_content fl"><a href=""><button style="width: 45px;margin-top: 46px;margin-left: -3px;">删除</button></a></div>
                    <div class="clear"></div>
                </div>
            </c:forEach>

        </div>
    </div>
    <div class="jiesuandan mt20 center">
        <div class="tishi fl ml20">
            <ul>
                <li><a href="${pageContext.request.contextPath}/page/liebiao.jsp">继续购物</a></li>
                <%--<li>|</li>--%>
               <%-- <li>共<span>2</span>件商品，已选择<span>2</span>件</li>--%>
                <div class="clear"></div>
            </ul>
        </div>
        <div class="jiesuan fr">
            <div class="jiesuanjiage fl">合计（不含运费）：<span id="result">${shop.get(0).bookprice}元</span></div>
            <div class="jsanniu fr"><input class="jsan" type="submit" name="jiesuan" onclick="jieshuan()"  value="去结算"/></div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</div>


<script type="text/javascript">

   function zongjia(a) {
       //获取数量变化后的值
       var number=a.value;
       //根据现在的数量计算总价并给小计赋值
       var danjia=a.parentNode.previousElementSibling.innerHTML;
       var textIndex=danjia.indexOf("元");
       //获取单价中的数字，不要价格单位
       var jiage=danjia.substring(0,textIndex);
       var zongjia=number*jiage;
       //alert(zongjia);
       a.parentNode.nextElementSibling.innerHTML=zongjia;//商品总价

       result.innerText = zongjia+"元";//购物车总价
       zj();
   }
   zj();
   //计算购物车的商品总价
   function zj(){
       // alert("111")
       //获取总价id属性标签
       var sumArr = document.getElementsByClassName("sum");

       //alert(sumArr.length);
       var sum = 0;
       for(var i =0;i<sumArr.length;i++){
           //var textIndex=sumArr[i].innerHTML.indexOf("元");
           //获取总价中的数字，不要价格单位
           //alert(textIndex)
           //var jiage= sumArr.SubString(0,str.Length-1);
           //var jiage=sumArr.substring(0,textIndex);

           sum += Number(sumArr[i].innerHTML);
          //alert(sum);
       }
       result.innerText = sum +"元";//总价
   }

   function jieshuan() {
       alert("结算成功")
   }
   zj();
</script>
</body>
</html>
